<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-themes-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no, email=no">
    <title>畅享会员服务 - 登录系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #333;
            transition: all 0.5s ease;
            overflow-x: hidden;
        }
        
        .container {
            width: 100%;
            max-width: 450px;
            margin: 0 auto;
            perspective: 1000px;
        }
        
        .card-container {
            position: relative;
            height: 600px;
        }
        
        .page {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            padding: 40px 30px;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            transform-style: preserve-3d;
            backface-visibility: hidden;
        }
        
        .page.active {
            transform: rotateY(0deg);
            opacity: 1;
            z-index: 10;
        }
        
        .page.inactive {
            transform: rotateY(180deg);
            opacity: 0;
            z-index: 0;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(30px) scale(0.95); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        
        .page:hover {
            transform: translateY(-5px) rotateX(1deg) rotateY(1deg);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
        }
        
        .page::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, #ff9a9e, #fad0c4, #a1c4fd, #c2e9fb);
            background-size: 400% 400%;
            animation: gradientBG 8s ease infinite;
        }
        
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .logo_box {
            text-align: center;
            margin-bottom: 30px;
            animation: logoFloat 3s ease-in-out infinite;
        }
        
        @keyframes logoFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        .logo_box img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #fff;
            box-shadow: 0 10px 25px rgba(37, 117, 252, 0.4);
        }
        
        .logo_box h1 {
            margin-top: 15px;
            font-size: 24px;
            font-weight: 700;
            color: #2c3e50;
            letter-spacing: 1px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .logo_box p {
            color: #6c757d;
            margin-top: 5px;
            font-size: 14px;
        }
        
        .input_group {
            margin-bottom: 25px;
            position: relative;
            animation: slideIn 0.6s ease-out;
            animation-fill-mode: backwards;
        }
        
        @keyframes slideIn {
            from { opacity: 0; transform: translateX(-20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        
        .input_label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
            font-size: 14px;
            padding-left: 8px;
        }
        
        .input_box {
            display: flex;
            align-items: center;
            background: #f8f9fa;
            border-radius: 12px;
            padding: 0 15px;
            border: 2px solid #e9ecef;
            transition: all 0.3s ease;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .input_box:focus-within {
            border-color: #2575fc;
            box-shadow: 0 0 0 3px rgba(37, 117, 252, 0.2), inset 0 2px 4px rgba(0,0,0,0.05);
            transform: translateY(-2px);
        }
        
        .input_box i {
            color: #6c757d;
            font-size: 18px;
            margin-right: 10px;
            transition: all 0.3s ease;
        }
        
        .input_box:focus-within i {
            color: #2575fc;
            transform: scale(1.1);
        }
        
        .input_box input {
            width: 100%;
            height: 55px;
            border: none;
            background: transparent;
            font-size: 16px;
            outline: none;
            color: #495057;
            transition: all 0.3s ease;
        }
        
        .input_box input:focus {
            color: #2575fc;
        }
        
        .input_box input::placeholder {
            color: #adb5bd;
            transition: all 0.3s ease;
        }
        
        .input_box input:focus::placeholder {
            opacity: 0.5;
        }
        
        .password_toggle {
            color: #6c757d;
            cursor: pointer;
            font-size: 18px;
            margin-left: 10px;
            transition: all 0.3s ease;
        }
        
        .password_toggle:hover {
            color: #2575fc;
            transform: scale(1.1);
        }
        
        .btn_sm {
            margin-top: 10px;
            animation: slideIn 0.6s ease-out 0.2s backwards;
        }
        
        .btn_sm input, .btn_sm button {
            width: 100%;
            height: 55px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            color: white;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(37, 117, 252, 0.4);
            position: relative;
            overflow: hidden;
        }
        
        .btn_sm input:hover, .btn_sm button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(37, 117, 252, 0.6);
        }
        
        .btn_sm input:active, .btn_sm button:active {
            transform: translateY(1px);
        }
        
        .btn_sm input::before, .btn_sm button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: 0.5s;
        }
        
        .btn_sm input:hover::before, .btn_sm button:hover::before {
            left: 100%;
        }
        
        .terms_box {
            display: flex;
            align-items: center;
            margin: 20px 0;
            color: #6c757d;
            font-size: 14px;
            animation: fadeIn 0.6s ease-out 0.3s backwards;
        }
        
        .terms_box input[type="checkbox"] {
            display: none;
        }
        
        .terms_box label {
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .terms_box label:hover {
            transform: scale(1.02);
        }
        
        .terms_box label::before {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid #dee2e6;
            border-radius: 5px;
            margin-right: 10px;
            transition: all 0.2s ease;
        }
        
        .terms_box input[type="checkbox"]:checked + label::before {
            background: #2575fc;
            border-color: #2575fc;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
        }
        
        .terms_box a {
            color: #2575fc;
            text-decoration: none;
            margin-left: 5px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .terms_box a:hover {
            text-decoration: underline;
            text-shadow: 0 0 5px rgba(37, 117, 252, 0.3);
        }
        
        .forget_box {
            display: flex;
            justify-content: space-between;
            margin: 25px 0;
            animation: fadeIn 0.6s ease-out 0.4s backwards;
        }
        
        .forget_box a {
            color: #6c757d;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.3s ease;
            padding: 5px 10px;
            border-radius: 8px;
        }
        
        .forget_box a:hover {
            color: #2575fc;
            text-decoration: underline;
            background: rgba(37, 117, 252, 0.1);
            transform: translateY(-2px);
        }
        
        .line_gray {
            height: 1px;
            background: #e9ecef;
            margin: 30px 0;
            position: relative;
            animation: fadeIn 0.6s ease-out 0.5s backwards;
        }
        
        .line_gray::before {
            content: '或';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 0 15px;
            color: #6c757d;
            font-size: 14px;
        }
        
        .three_box {
            text-align: center;
            color: #6c757d;
            margin-bottom: 25px;
            font-size: 16px;
            font-weight: 500;
            animation: fadeIn 0.6s ease-out 0.6s backwards;
        }
        
        .social_login {
            display: flex;
            justify-content: center;
            gap: 25px;
            animation: fadeIn 0.6s ease-out 0.7s backwards;
        }
        
        .social_login a {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .social_login a:hover {
            transform: translateY(-5px);
        }
        
        .social_icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 8px;
            color: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .social_icon::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: 0.5s;
        }
        
        .social_login a:hover .social_icon::before {
            left: 100%;
        }
        
        .social_icon.wechat {
            background: linear-gradient(135deg, #09ba07, #2aae67);
        }
        
        .social_icon.qq {
            background: linear-gradient(135deg, #12b7f5, #2a6ae6);
        }
        
        .social_icon.weibo {
            background: linear-gradient(135deg, #e6162d, #ff7e8b);
        }
        
        .social_login p {
            color: #495057;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .social_login a:hover p {
            color: #2575fc;
            font-weight: 600;
        }
        
        .error_msg {
            color: #ff4757;
            font-size: 14px;
            margin-top: 8px;
            display: none;
            padding-left: 8px;
            animation: shake 0.5s ease;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-5px); }
            40%, 80% { transform: translateX(5px); }
        }
        
        .footer {
            text-align: center;
            margin-top: 30px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            animation: fadeIn 0.8s ease-out 1s backwards;
        }
        
        .footer a {
            color: white;
            text-decoration: none;
            margin: 0 10px;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .footer a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: white;
            transition: width 0.3s ease;
        }
        
        .footer a:hover::after {
            width: 100%;
        }
        
        .footer a:hover {
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
        }
        
        /* 加载动画 */
        .loader {
            display: none;
            width: 24px;
            height: 24px;
            border: 3px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top: 3px solid white;
            animation: spin 1s linear infinite;
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        @keyframes spin {
            0% { transform: translateY(-50%) rotate(0deg); }
            100% { transform: translateY(-50%) rotate(360deg); }
        }
        
        /* 登录成功动画 */
        .success-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(37, 117, 252, 0.9);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 3000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }
        
        .success-animation.active {
            opacity: 1;
            pointer-events: all;
        }
        
        .checkmark {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            display: block;
            stroke-width: 2;
            stroke: #fff;
            stroke-miterlimit: 10;
            box-shadow: inset 0px 0px 0px #4bb71b;
            animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
        }
        
        .checkmark__circle {
            stroke-dasharray: 166;
            stroke-dashoffset: 166;
            stroke-width: 2;
            stroke-miterlimit: 10;
            stroke: #fff;
            fill: none;
            animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
        }
        
        .checkmark__check {
            transform-origin: 50% 50%;
            stroke-dasharray: 48;
            stroke-dashoffset: 48;
            animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
        }
        
        @keyframes stroke {
            100% { stroke-dashoffset: 0; }
        }
        
        @keyframes scale {
            0%, 100% { transform: none; }
            50% { transform: scale3d(1.1, 1.1, 1); }
        }
        
        @keyframes fill {
            100% { box-shadow: inset 0px 0px 0px 50px #4bb71b; }
        }
        
        .success-text {
            color: white;
            font-size: 24px;
            margin-top: 20px;
            text-align: center;
            opacity: 0;
            animation: fadeInText 0.5s ease 0.5s forwards;
        }
        
        @keyframes fadeInText {
            to { opacity: 1; }
        }
        
        /* 切换标签样式 */
        .tab-switcher {
            display: flex;
            justify-content: center;
            margin-bottom: 25px;
            border-bottom: 1px solid #e9ecef;
            padding-bottom: 15px;
        }
        
        .tab-switcher button {
            background: none;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            font-weight: 600;
            color: #6c757d;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .tab-switcher button.active {
            color: #2575fc;
        }
        
        .tab-switcher button::after {
            content: '';
            position: absolute;
            bottom: -16px;
            left: 0;
            width: 100%;
            height: 3px;
            background: #2575fc;
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }
        
        .tab-switcher button.active::after {
            transform: scaleX(1);
        }
        
        .tab-switcher button:hover:not(.active) {
            color: #2575fc;
        }
        
        /* 返回登录链接 */
        .back-to-login {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
        }
        
        .back-to-login a {
            color: #2575fc;
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
        }
        
        .back-to-login a i {
            margin-right: 5px;
            transition: transform 0.3s ease;
        }
        
        .back-to-login a:hover i {
            transform: translateX(-3px);
        }
        
        /* 验证码区域 */
        .captcha-box {
            display: flex;
            gap: 10px;
            margin-top: 8px;
        }
        
        .captcha-box input {
            flex: 1;
        }
        
        .captcha-box button {
            flex: 0 0 120px;
            height: 55px;
            border: none;
            border-radius: 12px;
            background: #e9ecef;
            color: #495057;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .captcha-box button:hover {
            background: #dee2e6;
        }
        
        .captcha-box button:disabled {
            background: #e9ecef;
            color: #adb5bd;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="success-animation" id="successAnimation">
        <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
            <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
            <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
        </svg>
        <div class="success-text" id="successText">登录成功！正在跳转到首页...</div>
    </div>

    <div class="container">
        <div class="card-container">
            <!-- 登录页面 -->
            <div class="page active" id="loginPage">
                <!-- Logo区域 -->
                <div class="logo_box">
                    <img src="img/logo_register.png" alt="App Logo">
                    <h1>欢迎回来</h1>
                    <p>登录开始您的知识之旅</p>
                </div>
                
                <!-- 表单区域 -->
                <div class="input_group">
                    <label class="input_label">手机号码</label>
                    <div class="input_box">
                        <i class="fas fa-mobile-alt"></i>
                        <input type="tel" id="phone_number" placeholder="请输入手机号码" maxlength="11">
                    </div>
                    <div class="error_msg" id="phone_error">请输入有效的手机号码</div>
                </div>
                
                <div class="input_group">
                    <label class="input_label">密码</label>
                    <div class="input_box">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="password" placeholder="请填写密码">
                        <span class="password_toggle" id="password_toggle">
                            <i class="fas fa-eye"></i>
                        </span>
                    </div>
                    <div class="error_msg" id="password_error">密码不能为空</div>
                </div>
                
                <!-- 登录按钮 -->
                <div class="btn_sm">
                    <input type="button" id="login_btn" value="登 录">
                    <div class="loader" id="login_loader"></div>
                </div>
                
                <!-- 条款同意 -->
                <div class="terms_box">
                    <input type="checkbox" id="terms_check" checked>
                    <label for="terms_check">
                        我已阅读并同意
                        <a href="#">服务条款</a>和
                        <a href="#">隐私政策</a>
                    </label>
                </div>
                
                <!-- 忘记密码/注册 -->
                <div class="forget_box">
                    <a href="#" id="forgot-password-link">忘记密码?</a>
                    <a href="#" id="register-link">新用户注册</a>
                </div>
                
                <!-- 分隔线 -->
                <div class="line_gray"></div>
                
                <!-- 第三方登录 -->
                <div class="three_box">
                    使用其他账号登录
                </div>
                
                <div class="social_login">
                    <a href="#">
                        <div class="social_icon wechat">
                            <i class="fab fa-weixin"></i>
                        </div>
                        <p>微信</p>
                    </a>
                    <a href="#">
                        <div class="social_icon qq">
                            <i class="fab fa-qq"></i>
                        </div>
                        <p>QQ</p>
                    </a>
                    <a href="#">
                        <div class="social_icon weibo">
                            <i class="fab fa-weibo"></i>
                        </div>
                        <p>微博</p>
                    </a>
                </div>
            </div>
            
            <!-- 注册页面 -->
            <div class="page inactive" id="registerPage">
                <div class="tab-switcher">
                    <button class="active" id="loginTabBtn">登录</button>
                    <button id="registerTabBtn">注册</button>
                    <button id="forgotTabBtn">找回密码</button>
                </div>
                
                <div class="logo_box">
                    <img src="img/logo_register.png" alt="Register Logo">
                    <h1>创建新账户</h1>
                    <p>加入我们，开启全新体验</p>
                </div>
                
                <div class="input_group">
                    <label class="input_label">手机号码</label>
                    <div class="input_box">
                        <i class="fas fa-mobile-alt"></i>
                        <input type="tel" id="reg_phone" placeholder="请输入手机号码" maxlength="11">
                    </div>
                    <div class="error_msg" id="reg_phone_error">请输入有效的手机号码</div>
                </div>
                
                <div class="input_group">
                    <label class="input_label">短信验证码</label>
                    <div class="captcha-box">
                        <div class="input_box" style="flex: 1;">
                            <i class="fas fa-sms"></i>
                            <input type="text" id="sms_code" placeholder="请输入验证码" maxlength="6">
                        </div>
                        <button id="get_sms_code">获取验证码</button>
                    </div>
                    <div class="error_msg" id="sms_code_error">请输入验证码</div>
                </div>
                
                <div class="input_group">
                    <label class="input_label">设置密码</label>
                    <div class="input_box">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="reg_password" placeholder="请设置登录密码">
                        <span class="password_toggle" id="reg_password_toggle">
                            <i class="fas fa-eye"></i>
                        </span>
                    </div>
                    <div class="error_msg" id="reg_password_error">密码长度至少为6位</div>
                </div>
                
                <div class="input_group">
                    <label class="input_label">确认密码</label>
                    <div class="input_box">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="confirm_password" placeholder="请再次输入密码">
                        <span class="password_toggle" id="confirm_password_toggle">
                            <i class="fas fa-eye"></i>
                        </span>
                    </div>
                    <div class="error_msg" id="confirm_password_error">两次输入的密码不一致</div>
                </div>
                
                <div class="btn_sm">
                    <button id="register_btn">注册账号</button>
                    <div class="loader" id="register_loader"></div>
                </div>
                
                <div class="terms_box">
                    <input type="checkbox" id="reg_terms_check" checked>
                    <label for="reg_terms_check">
                        我已阅读并同意
                        <a href="#">服务条款</a>和
                        <a href="#">隐私政策</a>
                    </label>
                </div>
                
                <div class="back-to-login">
                    <a href="#" id="back-to-login-from-reg"><i class="fas fa-arrow-left"></i> 返回登录</a>
                </div>
            </div>
            
            <!-- 忘记密码页面 -->
            <div class="page inactive" id="forgotPage">
                <div class="tab-switcher">
                    <button class="active" id="loginTabBtn2">登录</button>
                    <button id="registerTabBtn2">注册</button>
                    <button id="forgotTabBtn2">找回密码</button>
                </div>
                
                <div class="logo_box">
                    <img src="img/logo_register.png" alt="Forgot Password Logo">
                    <h1>忘记密码</h1>
                    <p>请验证您的身份以重置密码</p>
                </div>
                
                <div class="input_group">
                    <label class="input_label">手机号码</label>
                    <div class="input_box">
                        <i class="fas fa-mobile-alt"></i>
                        <input type="tel" id="forgot_phone" placeholder="请输入绑定的手机号码" maxlength="11">
                    </div>
                    <div class="error_msg" id="forgot_phone_error">请输入有效的手机号码</div>
                </div>
                
                <div class="input_group">
                    <label class="input_label">短信验证码</label>
                    <div class="captcha-box">
                        <div class="input_box" style="flex: 1;">
                            <i class="fas fa-sms"></i>
                            <input type="text" id="forgot_sms_code" placeholder="请输入验证码" maxlength="6">
                        </div>
                        <button id="forgot_get_sms_code">获取验证码</button>
                    </div>
                    <div class="error_msg" id="forgot_sms_code_error">请输入验证码</div>
                </div>
                
                <div class="input_group">
                    <label class="input_label">新密码</label>
                    <div class="input_box">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="new_password" placeholder="请设置新密码">
                        <span class="password_toggle" id="new_password_toggle">
                            <i class="fas fa-eye"></i>
                        </span>
                    </div>
                    <div class="error_msg" id="new_password_error">密码长度至少为6位</div>
                </div>
                
                <div class="input_group">
                    <label class="input_label">确认新密码</label>
                    <div class="input_box">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="confirm_new_password" placeholder="请再次输入新密码">
                        <span class="password_toggle" id="confirm_new_password_toggle">
                            <i class="fas fa-eye"></i>
                        </span>
                    </div>
                    <div class="error_msg" id="confirm_new_password_error">两次输入的密码不一致</div>
                </div>
                
                <div class="btn_sm">
                    <button id="reset_password_btn">忘记密码</button>
                    <div class="loader" id="reset_loader"></div>
                </div>
                
                <div class="back-to-login">
                    <a href="#" id="back-to-login-from-forgot"><i class="fas fa-arrow-left"></i> 返回登录</a>
                </div>
            </div>
        </div>
        
        <!-- 页脚 -->
        <div class="footer">
            <a href="#">关于我们</a> | 
            <a href="#">帮助中心</a> | 
            <a href="#">联系我们</a>
            <p>© 2023 畅享会员服务 版权所有</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 页面元素引用
            const loginPage = document.getElementById('loginPage');
            const registerPage = document.getElementById('registerPage');
            const forgotPage = document.getElementById('forgotPage');
            
            // 切换功能
            function switchToPage(page) {
                // 隐藏所有页面
                loginPage.classList.remove('active');
                loginPage.classList.add('inactive');
                registerPage.classList.remove('active');
                registerPage.classList.add('inactive');
                forgotPage.classList.remove('active');
                forgotPage.classList.add('inactive');
                
                // 显示目标页面
                page.classList.remove('inactive');
                page.classList.add('active');
            }
            
            // 事件监听
            document.getElementById('register-link').addEventListener('click', function(e) {
                e.preventDefault();
                switchToPage(registerPage);
            });
            
            document.getElementById('forgot-password-link').addEventListener('click', function(e) {
                e.preventDefault();
                switchToPage(forgotPage);
            });
            
            document.getElementById('back-to-login-from-reg').addEventListener('click', function(e) {
                e.preventDefault();
                switchToPage(loginPage);
            });
            
            document.getElementById('back-to-login-from-forgot').addEventListener('click', function(e) {
                e.preventDefault();
                switchToPage(loginPage);
            });
            
            document.getElementById('loginTabBtn').addEventListener('click', function() {
                switchToPage(loginPage);
            });
            
            document.getElementById('registerTabBtn').addEventListener('click', function() {
                switchToPage(registerPage);
            });
            
            document.getElementById('forgotTabBtn').addEventListener('click', function() {
                switchToPage(forgotPage);
            });
            
            document.getElementById('loginTabBtn2').addEventListener('click', function() {
                switchToPage(loginPage);
            });
            
            document.getElementById('registerTabBtn2').addEventListener('click', function() {
                switchToPage(registerPage);
            });
            
            document.getElementById('forgotTabBtn2').addEventListener('click', function() {
                switchToPage(forgotPage);
            });
            
            // 密码可见性切换
            function setupPasswordToggle(inputId, toggleId) {
                const toggleBtn = document.getElementById(toggleId);
                const passwordField = document.getElementById(inputId);
                
                toggleBtn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    
                    if (passwordField.type === 'password') {
                        passwordField.type = 'text';
                        icon.classList.remove('fa-eye');
                        icon.classList.add('fa-eye-slash');
                    } else {
                        passwordField.type = 'password';
                        icon.classList.remove('fa-eye-slash');
                        icon.classList.add('fa-eye');
                    }
                });
            }
            
            // 设置所有密码切换
            setupPasswordToggle('password', 'password_toggle');
            setupPasswordToggle('reg_password', 'reg_password_toggle');
            setupPasswordToggle('confirm_password', 'confirm_password_toggle');
            setupPasswordToggle('new_password', 'new_password_toggle');
            setupPasswordToggle('confirm_new_password', 'confirm_new_password_toggle');
            
            // 表单验证函数
            function validateForm(formType) {
                let isValid = true;
                
                if (formType === 'login') {
                    const phone = document.getElementById('phone_number').value.trim();
                    const password = document.getElementById('password').value.trim();
                    
                    // 手机号验证
                    if (!phone) {
                        document.getElementById('phone_error').textContent = '请输入手机号码';
                        document.getElementById('phone_error').style.display = 'block';
                        isValid = false;
                    } else if (!/^1[3-9]\d{9}$/.test(phone)) {
                        document.getElementById('phone_error').textContent = '请输入有效的手机号码';
                        document.getElementById('phone_error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('phone_error').style.display = 'none';
                    }
                    
                    // 密码验证
                    if (!password) {
                        document.getElementById('password_error').textContent = '请输入密码';
                        document.getElementById('password_error').style.display = 'block';
                        isValid = false;
                    } else if (password.length < 6) {
                        document.getElementById('password_error').textContent = '密码长度至少为6位';
                        document.getElementById('password_error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('password_error').style.display = 'none';
                    }
                    
                    // 条款验证
                    if (!document.getElementById('terms_check').checked) {
                        showNotification('请阅读并同意服务条款');
                        isValid = false;
                    }
                } 
                else if (formType === 'register') {
                    const phone = document.getElementById('reg_phone').value.trim();
                    const smsCode = document.getElementById('sms_code').value.trim();
                    const password = document.getElementById('reg_password').value.trim();
                    const confirmPassword = document.getElementById('confirm_password').value.trim();
                    
                    // 手机号验证
                    if (!phone) {
                        document.getElementById('reg_phone_error').textContent = '请输入手机号码';
                        document.getElementById('reg_phone_error').style.display = 'block';
                        isValid = false;
                    } else if (!/^1[3-9]\d{9}$/.test(phone)) {
                        document.getElementById('reg_phone_error').textContent = '请输入有效的手机号码';
                        document.getElementById('reg_phone_error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('reg_phone_error').style.display = 'none';
                    }
                    
                    // 验证码验证
                    if (!smsCode) {
                        document.getElementById('sms_code_error').textContent = '请输入验证码';
                        document.getElementById('sms_code_error').style.display = 'block';
                        isValid = false;
                    } else if (!/^\d{6}$/.test(smsCode)) {
                        document.getElementById('sms_code_error').textContent = '验证码格式不正确';
                        document.getElementById('sms_code_error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('sms_code_error').style.display = 'none';
                    }
                    
                    // 密码验证
                    if (!password) {
                        document.getElementById('reg_password_error').textContent = '请输入密码';
                        document.getElementById('reg_password_error').style.display = 'block';
                        isValid = false;
                    } else if (password.length < 6) {
                        document.getElementById('reg_password_error').textContent = '密码长度至少为6位';
                        document.getElementById('reg_password_error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('reg_password_error').style.display = 'none';
                    }
                    
                    // 确认密码验证
                    if (!confirmPassword) {
                        document.getElementById('confirm_password_error').textContent = '请确认密码';
                        document.getElementById('confirm_password_error').style.display = 'block';
                        isValid = false;
                    } else if (password !== confirmPassword) {
                        document.getElementById('confirm_password_error').textContent = '两次输入的密码不一致';
                        document.getElementById('confirm_password_error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('confirm_password_error').style.display = 'none';
                    }
                    
                    // 条款验证
                    if (!document.getElementById('reg_terms_check').checked) {
                        showNotification('请阅读并同意服务条款');
                        isValid = false;
                    }
                } 
                else if (formType === 'forgot') {
                    const phone = document.getElementById('forgot_phone').value.trim();
                    const smsCode = document.getElementById('forgot_sms_code').value.trim();
                    const newPassword = document.getElementById('new_password').value.trim();
                    const confirmNewPassword = document.getElementById('confirm_new_password').value.trim();
                    
                    // 手机号验证
                    if (!phone) {
                        document.getElementById('forgot_phone_error').textContent = '请输入手机号码';
                        document.getElementById('forgot_phone_error').style.display = 'block';
                        isValid = false;
                    } else if (!/^1[3-9]\d{9}$/.test(phone)) {
                        document.getElementById('forgot_phone_error').textContent = '请输入有效的手机号码';
                        document.getElementById('forgot_phone_error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('forgot_phone_error').style.display = 'none';
                    }
                    
                    // 验证码验证
                    if (!smsCode) {
                        document.getElementById('forgot_sms_code_error').textContent = '请输入验证码';
                        document.getElementById('forgot_sms_code_error').style.display = 'block';
                        isValid = false;
                    } else if (!/^\d{6}$/.test(smsCode)) {
                        document.getElementById('forgot_sms_code_error').textContent = '验证码格式不正确';
                        document.getElementById('forgot_sms_code_error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('forgot_sms_code_error').style.display = 'none';
                    }
                    
                    // 新密码验证
                    if (!newPassword) {
                        document.getElementById('new_password_error').textContent = '请输入新密码';
                        document.getElementById('new_password_error').style.display = 'block';
                        isValid = false;
                    } else if (newPassword.length < 6) {
                        document.getElementById('new_password_error').textContent = '密码长度至少为6位';
                        document.getElementById('new_password_error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('new_password_error').style.display = 'none';
                    }
                    
                    // 确认新密码验证
                    if (!confirmNewPassword) {
                        document.getElementById('confirm_new_password_error').textContent = '请确认新密码';
                        document.getElementById('confirm_new_password_error').style.display = 'block';
                        isValid = false;
                    } else if (newPassword !== confirmNewPassword) {
                        document.getElementById('confirm_new_password_error').textContent = '两次输入的密码不一致';
                        document.getElementById('confirm_new_password_error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('confirm_new_password_error').style.display = 'none';
                    }
                }
                
                return isValid;
            }
            
            // 倒计时函数
            function startCountdown(buttonId, seconds) {
                const button = document.getElementById(buttonId);
                button.disabled = true;
                
                let remaining = seconds;
                button.textContent = `${remaining}秒后重发`;
                
                const interval = setInterval(() => {
                    remaining--;
                    button.textContent = `${remaining}秒后重发`;
                    
                    if (remaining <= 0) {
                        clearInterval(interval);
                        button.disabled = false;
                        button.textContent = '获取验证码';
                    }
                }, 1000);
            }
            
            // 获取验证码
            document.getElementById('get_sms_code').addEventListener('click', function() {
                const phone = document.getElementById('reg_phone').value.trim();
                
                if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
                    document.getElementById('reg_phone_error').textContent = '请输入有效的手机号码';
                    document.getElementById('reg_phone_error').style.display = 'block';
                    return;
                }
                
                // 模拟发送验证码
                showNotification('验证码已发送到您的手机');
                startCountdown('get_sms_code', 60);
            });
            
            document.getElementById('forgot_get_sms_code').addEventListener('click', function() {
                const phone = document.getElementById('forgot_phone').value.trim();
                
                if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
                    document.getElementById('forgot_phone_error').textContent = '请输入有效的手机号码';
                    document.getElementById('forgot_phone_error').style.display = 'block';
                    return;
                }
                
                // 模拟发送验证码
                showNotification('验证码已发送到您的手机');
                startCountdown('forgot_get_sms_code', 60);
            });
            
            // 登录按钮事件
            const loginBtn = document.getElementById('login_btn');
            const loginLoader = document.getElementById('login_loader');
            
            loginBtn.addEventListener('click', function() {
                if (validateForm('login')) {
                    // 显示加载动画
                    loginBtn.style.paddingRight = '50px';
                    loginLoader.style.display = 'block';
                    
                    // 模拟登录请求
                    setTimeout(function() {
                        loginSuccess('登录成功！正在跳转到首页...');
                    }, 1500);
                }
            });
            
            // 注册按钮事件
            const registerBtn = document.getElementById('register_btn');
            const registerLoader = document.getElementById('register_loader');
            
            registerBtn.addEventListener('click', function() {
                if (validateForm('register')) {
                    // 显示加载动画
                    registerBtn.style.paddingRight = '50px';
                    registerLoader.style.display = 'block';
                    
                    // 模拟注册请求
                    setTimeout(function() {
                        loginSuccess('注册成功！正在跳转到首页...');
                    }, 1500);
                }
            });
            
            // 重置密码按钮事件
            const resetBtn = document.getElementById('reset_password_btn');
            const resetLoader = document.getElementById('reset_loader');
            
            resetBtn.addEventListener('click', function() {
                if (validateForm('forgot')) {
                    // 显示加载动画
                    resetBtn.style.paddingRight = '50px';
                    resetLoader.style.display = 'block';
                    
                    // 模拟重置密码请求
                    setTimeout(function() {
                        showNotification('密码重置成功！', true);
                        resetBtn.style.paddingRight = '';
                        resetLoader.style.display = 'none';
                        
                        // 3秒后返回登录页
                        setTimeout(function() {
                            switchToPage(loginPage);
                        }, 3000);
                    }, 1500);
                }
            });
            
            // 输入框输入时隐藏错误信息
            document.querySelectorAll('input').forEach(input => {
                input.addEventListener('input', function() {
                    const errorMsg = this.closest('.input_group')?.querySelector('.error_msg');
                    if (errorMsg) {
                        errorMsg.style.display = 'none';
                    }
                });
            });
            
            // 按Enter键提交表单
            document.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    if (loginPage.classList.contains('active')) {
                        loginBtn.click();
                    } else if (registerPage.classList.contains('active')) {
                        registerBtn.click();
                    } else if (forgotPage.classList.contains('active')) {
                        resetBtn.click();
                    }
                }
            });
            
            // 登录成功函数
            function loginSuccess(message) {
                const successAnimation = document.getElementById('successAnimation');
                const successText = document.getElementById('successText');
                
                successText.textContent = message;
                
                // 显示成功动画
                successAnimation.classList.add('active');
                
                // 3秒后跳转到index.html
                setTimeout(function() {
                    window.location.href = 'index.html';
                }, 3000);
            }
            
            // 显示通知
            function showNotification(message, isSuccess = false) {
                // 移除旧的通知
                const oldNotification = document.querySelector('.notification');
                if (oldNotification) oldNotification.remove();
                
                // 创建通知元素
                const notification = document.createElement('div');
                notification.className = 'notification';
                notification.textContent = message;
                
                // 设置样式
                notification.style.cssText = `
                    position: fixed;
                    top: 20px;
                    left: 50%;
                    transform: translateX(-50%);
                    background: ${isSuccess ? 'rgba(52, 199, 89, 0.9)' : 'rgba(255, 71, 87, 0.9)'};
                    color: white;
                    padding: 12px 25px;
                    border-radius: 30px;
                    box-shadow: ${isSuccess ? '0 5px 15px rgba(52, 199, 89, 0.3)' : '0 5px 15px rgba(255, 71, 87, 0.3)'};
                    z-index: 2000;
                    opacity: 0;
                    transition: opacity 0.3s, top 0.3s;
                    white-space: nowrap;
                    text-align: center;
                    font-size: 16px;
                    font-weight: 500;
                `;
                
                document.body.appendChild(notification);
                
                // 显示通知
                setTimeout(() => {
                    notification.style.opacity = '1';
                    notification.style.top = '30px';
                }, 10);
                
                // 3秒后移除通知
                setTimeout(() => {
                    notification.style.opacity = '0';
                    notification.style.top = '20px';
                    setTimeout(() => {
                        notification.remove();
                    }, 300);
                }, 3000);
            }
        });
    </script>
</body>
</html>